<template>
  <div class="u-lstlay" v-show="flag1">
    <div class="m-schlist">
      <p class="note s-fc3">
        <a class="s-fc3 xtag" href="/search/#/?s=w&amp;type=1002"
          >搜“{{ keyword }}” 相关用户</a
        >
        &gt;
      </p>
      <div class="rap">
        <div class="itm clearfix" v-for="item in data?.order" :key="item">
          <h3 class="hd">
            <i class="icn u-icn u-icn-26" :class="styleIcon(item)"></i
            ><em class="f-fl" v-text="getText(item)"></em>
          </h3>
          <ul class="clearfix">
            <li v-for="it in data[item]" :key="it.id">
              <router-link
                :to="getUrl(item, it.id)"
                class="s-fc0 overtext"
                v-text="judge(it)"
                @mousedown.prevent
              ></router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchSuggestFn } from "@/api/index.js";
import { shallowRef, toRef } from "@vue/reactivity";
import routeUrl from "@/baseFnMixin/routeUrl/RouteUrl.js";
import { watch } from "@vue/runtime-core";
import { ref, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";

export default {
  name: "SearchAdvice",
  props: { keyword: { type: String, default: "" }, flag: { type: Boolean } },
  setup(props) {
    let data = shallowRef(null);
    let flag1 = ref(false);
    let word = toRef(props, "keyword");
    let flag = true;
    const route = useRoute();
    watch(word, (value) => {
      if (value.trimStart().length) {
        if (flag) {
          flag = false;
          getSearchSuggestFn(value).then((response) => {
            data.value = response.data.result;
            if (props.keyword.trimStart().length && props.flag) {
              flag1.value = true;
            }
          });
          setTimeout(() => {
            flag = true;
          }, 500);
        }
      } else {
        flag1.value = false;
      }
    });
    let a = toRef(props, "flag");
    watch(a, (value) => {
      if (value) {
        if (word.value.trimStart().length) {
          flag1.value = true;
        }
      } else {
        flag1.value = false;
      }
    });
    watch(route, () => {
      flag1.value = false;
    });

    function styleIcon(value) {
      let data = null;
      switch (value) {
        case "songs":
          data = "u-icn-26";
          break;
        case "artists":
          data = "u-icn-27";
          break;
        case "albums":
          data = "u-icn-28";
          break;
        case "s":
          data = "u-icn-28";
          break;
        default:
          break;
      }
      return data;
    }
    function getUrl(value, id) {
      let data = null;
      switch (value) {
        case "songs":
          data = routeUrl("songpage", id, 0, 0);
          break;
        case "artists":
          data = routeUrl("songpage", id, 0, 1);
          break;
        case "albums":
          data = routeUrl("songpage", id, 0, 1);
          break;
        case "playlists":
          data = routeUrl("playList", id, 0, 0);
          break;
        default:
          break;
      }
      if (data) {
        return data;
      } else {
        return {
          name: "",
        };
      }
    }
    function getText(value) {
      let data = null;
      switch (value) {
        case "songs":
          data = "单曲";
          break;
        case "artists":
          data = "歌手";
          break;
        case "albums":
          data = "专辑";
          break;
        case "playlists":
          data = "歌单";
          break;
        default:
          break;
      }
      return data;
    }
    function judge(value) {
      if (value.artist?.name) {
        const text = mergeName(value.name, value.artist);
        return text;
      } else if (value.artists?.length) {
        const text = mergeName(value.name, value.artists);
        return text;
      } else {
        return value.name;
      }
    }

    function mergeName(value, value1) {
      let text = value;
      if (Object.prototype.toString.call(value1) === "[object Object]") {
        text = `${text}-${value1.name}`;
      } else {
        value1.forEach((element, index) => {
          if (index === 0) {
            text = `${text}-${element.name}`;
          } else {
            text = `${text}&nbsp;${element.name}`;
          }
        });
      }
      return text;
    }
    onBeforeUnmount(() => {
      flag = null;
    });

    return {
      data,
      styleIcon,
      getText,
      getUrl,
      judge,
      flag1,
    };
  },
};
</script>

<style scoped lang="less">
.btn {
  float: right;
  width: 50px;
  height: 40px;
  text-indent: -9999px;
}
.u-lstlay {
  top: 43px;
  width: 418px;
}

.u-lstlay {
  position: absolute;
  z-index: 120;
  left: 0;
  box-sizing: border-box;
  border: 1px solid #bebebe;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 7px #555;
  text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
}
.note {
  height: 17px;
  padding: 11px 10px;
  border-bottom: 1px solid #e2e2e2;
}
.hd {
  float: left;
  width: 52px;
  margin-right: -100px;
  padding: 10px 0 0 10px;
  border-right: 1px solid #e2e2e2;
  line-height: 17px;
  font-weight: normal;
  .icn {
    float: left;
    margin: 2px 4px 0 0;
  }
}
.u-icn-26 {
  width: 14px;
  height: 15px;
  background-position: -35px -300px;
}
.m-schlist {
  ul {
    margin-left: 62px;
    margin-top: -1px;
    padding: 6px 0 5px;
    border-top: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
  }
  .odd {
    background: #f9f8f8;
  }
  li {
    width: 100%;
    float: left;
    a {
      display: block;
      width: 100%;
      text-indent: 12px;
      line-height: 24px;
    }
  }
}
.u-icn-27 {
  background-position: -50px -300px;
}
.u-icn-28 {
  background-position: -35px -320px;
}
.u-icn-29 {
  background-position: -50px -320px;
}
li {
  a {
    &:hover {
      background-color: #e3e5e7;
    }
  }
}
</style>
